<template>
  <div class="home-container" p>
    <ul>
      <li style="width:620px;height:150px;left:300px;top:62px;" ><router-link :to="{path:'/panorama'}" target="_blank"><div style="width:620px;height:150px;left:300px;top:62px;"></div></router-link></li>
      <li style="left:21px;top:266px;" @click="itemClick('公司治理')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:47px;top:368px;width:140px;" @click="itemClick('反应不正常竞争')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img style="left:32px;"></li>
      <li style="left:157px;top:292px;width:70px;" @click="itemClick('反垄断')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:208px;top:426px;width:80px;" @click="itemClick('知识产权')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:254px;top:327px;width:140px;" @click="itemClick('信息与数据安全')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img style="left:32px;"></li>
      <li style="left:340px;top:410px;width:80px;" @click="itemClick('商业贿赂')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:422px;top:334px;width:80px;" @click="itemClick('商业秘密')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:473px;top:432px;width:80px;" @click="itemClick('合作伙伴')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>

      <li style="left:660px;top:371px;width:80px;" @click="itemClick('人力资源')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:744px;top:430px;width:80px;" @click="itemClick('综合管理')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:752px;top:330px;width:80px;" @click="itemClick('资产财务')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:865px;top:406px;width:80px;" @click="itemClick('采购招标')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:874px;top:328px;width:80px;" @click="itemClick('客户服务')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:983px;top:415px;width:80px;" @click="itemClick('网络运营')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:993px;top:292px;width:80px;" @click="itemClick('工程建设')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:1101px;top:381px;width:80px;"  @click="itemClick('政企项目')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
      <li style="left:1112px;top:266px;width:80px;" @click="itemClick('市场经营')" @mouseenter="mouseIn($event)" @mouseleave="mouseOut($event)"><img></li>
    </ul>
  </div>

</template>

<script>
import API from './api-chat-window';
export default {
  name: "home",
  data() {
    return {
    }
  },
  mounted() {
    API.getUserInfo({}).then(res => {
      if (res.data) {
      }
    })
  },
  beforeCreate: function() {
    document.body.className = "home-wrap";
  },
  beforeDestroy(){
    document.body.className = '';
  },
  methods: {
    itemClick(moduleName) {
      const chatWindow = this.$router.resolve({path: '/', query: {moduleName: moduleName}})
      window.open(chatWindow.href,'_blank', null, true);
    },
    mouseIn(e) {
      e.currentTarget.firstElementChild.style.display = "block";
    },
    mouseOut(e) {
      e.currentTarget.firstElementChild.style.display = "none";
    }
  }
}
</script>
<style>
</style>
